<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会基本信息设置
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">设置记录基础信息</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="box-top">
                <el-button type="warning" @click="adddialogVisible = true">新增</el-button>
                <span class="box-text">记录标识 ： XX , 破纪录标记 : NXX , 平纪录标记 : EXX</span>
            </div>
            <el-table :data="tableData" border stripe>
                <el-table-column prop="rnno" label="编号" width="80">
                </el-table-column>
                <el-table-column prop="recmark" label="记录标识">
                </el-table-column>
                <el-table-column prop="gridtoName" label="组别">
                </el-table-column>
                <el-table-column prop="rtype" label="类型">
                </el-table-column>
                <el-table-column prop="umark" label="破纪录标记">
                </el-table-column>
                <el-table-column prop="smark" label="平记录标记">
                </el-table-column>
                <el-table-column label="操作" width="230" fixed="right">
                    <template #default="scope">
                        <!-- <el-button type="success" @click="adddialogVisible = true">添加</el-button> -->
                        <el-button type="primary" @click="showeditdialog(scope.row)">修改</el-button>
                        <el-button type="danger" @click="grodelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 添加页面 -->
        <el-dialog title="记录基础信息添加" v-model="adddialogVisible" draggable width="40%" :before-close="addleClose">
            <el-form :model="addfrom" label-width="100" :rules="rules" ref="addForm">
                <el-form-item prop="rnno" label="编号：">
                    <el-input v-model="addfrom.rnno"></el-input>
                </el-form-item>
                <el-form-item prop="recmark" label="记录标识：">
                    <el-input v-model="addfrom.recmark"></el-input>
                </el-form-item>
                <el-form-item prop="gridtoName" label="组别：">
                    <el-select v-model="addfrom.gridtoName">
                        <el-option v-for="(item, index) in groupName" :key="index + 1" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="rtype" label="类型：">
                    <el-select v-model="addfrom.rtype">
                        <el-option v-for="(item, index) in seltype" :key="index + 1" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="破纪录标记：">
                    <el-input v-model="addfrom.umark"></el-input>
                </el-form-item>
                <el-form-item label="平记录标记：">
                    <el-input v-model="addfrom.smark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addleClose">取 消</el-button>
                <el-button type="primary" @click="addgro">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改页面 -->
        <el-dialog title="记录基础信息修改" v-model="editdialogVisible" draggable width="40%" :before-close="handleClose">
            <el-form :model="editfrom" label-width="120">
                <el-form-item label="编号：">
                    <el-input v-model="editfrom.rnno"></el-input>
                </el-form-item>
                <el-form-item label="记录标识：">
                    <el-input v-model="editfrom.recmark"></el-input>
                </el-form-item>
                <el-form-item label="组别：">
                    <el-select v-model="editfrom.gridtoName">
                        <el-option v-for="(item, index) in groupName" :key="index + 1" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-select v-model="editfrom.rtype">
                        <el-option v-for="(item, index) in seltype" :key="index + 1" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="破纪录标记：">
                    <el-input v-model="editfrom.umark"></el-input>
                </el-form-item>
                <el-form-item label="平记录标记：">
                    <el-input v-model="editfrom.smark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">取 消</el-button>
                <el-button type="primary" @click="editRecoedinfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            multipleSelection: '',
            tableData: [],
            groupName: [],
            seltype: [],
            adddialogVisible: false,
            addfrom: {
                rnno: null,
                recmark: '',
                gridtoName: '',
                rtype: '',
                umark: '',
                smark: ''
            },
            initialForm: {},
            editdialogVisible: false,
            editfrom: {
                rnno: null,
                recmark: '',
                gridtoName: '',
                rtype: '',
                umark: '',
                smark: ''
            },
            currentPage3: 5,
            rules: {
                rnno: [
                    { required: true, message: '请输入编号', trigger: 'blur' },
                ],
                recmark: [
                    { required: true, message: '请输入标识', trigger: 'blur' },
                ],
                gridtoName: [
                    { required: true, message: '请选择组别', trigger: 'blur' },
                ],
                rtype: [
                    { required: true, message: '请选择类型', trigger: 'blur' },
                ],
            }
        }
    },
    created() {
        this.initialForm = { ...this.addfrom }
        this.postRecordinfoList();
        this.postGridtoNameinfoList();
        this.postRtypeinfoList();
    },
    methods: {
        // 查询
        async postRecordinfoList() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/Cname/getmsg');
                if (result.data.code == 0) {
                    this.tableData = result.data.data
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async postGridtoNameinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/match/getGroupmsg');
            if (result.data.code == 0) {
                this.groupName = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async postRtypeinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/Cname/getRtypemsg');
            if (result.data.code == 0) {
                this.seltype = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 删除单条数据
        grodelete(e) {
            // console.log(e)
            this.$confirm('此操作将删除改条数据，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(async () => {
                const result = await this.$http.post(this.BACKEND_URL + '/Cname/deletemsg', e)
                if (result.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.postRecordinfoList()
                } else if (result.data.code == 500) {
                    this.$message.error(result.data.msg)
                }
            }).catch(() => {
            });
        },
        // 获取单个数据信息
        async showeditdialog(info) {
            this.editdialogVisible = true
            this.editfrom = info
        },
        // 新增数据
        async addgro() {
            this.$refs.addForm.validate(async (valid) => {
                if (valid) {
                    const result = await this.$http.post(this.BACKEND_URL + '/Cname/insertmsg', this.addfrom)
                    if (result.data.code == 0) {
                        this.adddialogVisible = false
                        this.postRecordinfoList()
                        this.$message.success('添加成功')
                        this.addfrom = { ...this.initialForm }
                    } else if (result.data.code == 500) {
                        this.addfrom = { ...this.initialForm }
                        this.$message.error(result.data.msg)
                    }
                } else {
                    this.$message.error('请填写必要信息');
                }
            });
        },
        addleClose() {
            this.adddialogVisible = false
            this.addfrom = { ...this.initialForm }
        },
        //修改
        async editRecoedinfo() {
            const result = await this.$http.post(this.BACKEND_URL + '/Cname/updatemsg', this.editfrom)
            if (result.data.code == 0) {
                this.editdialogVisible = false
                this.postRecordinfoList()
                this.$message.success('修改成功')
            } else if (result.data.code == 500) {
                this.postRecordinfoList()
                this.$message.error(result.data.msg)
            }
        },
        cancelEdit() {
            this.editdialogVisible = false
            this.postRecordinfoList()
        },
        handleClose(done) {
            this.postRecordinfoList()
            done()
        },
    }
}
</script>

<style lang="less" scoped>
.box-card {
    margin-top: 15px;

    .box-top {
        float: left;
        margin-bottom: 15px;

        .box-text {
            font-size: 12px;
            margin-left: 15px;
            color: #abb3bd;
        }
    }
}

// 操作按钮
:deep(.cell) {
    text-align: center;
}

.el-dialog {
    .el-checkbox {
        margin-left: 50px;
    }
}
</style>